<template>
  <div v-if="isShow" ref="refBox" @contextmenu.prevent :class="$style.main" :style="stl" @mousedown="startMove">
    <div :class="$style.head">
      <span>{{ title }}</span>
    </div>
    <span :class="$style.btn" @click="close"></span>
    <div :class="$style.body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, nextTick } from "vue";
import loading from "./el-loading.vue";

const props = defineProps({
  title: {
    type: String,
    default: "标题"
  }
});

const rl = ref(null),
    isWait = ref(false),
    isShow = ref(false),
    stl = ref(""),
    _move = ref(false),
    refBox = ref(null);

const _xy = reactive({
  x: 0,
  y: 0
});

let x = 0,
    y = 0;

const startMove = (e) => {
  e.preventDefault();
  _move.value = true;
};

const stopMove = (e) => {
  e.preventDefault();
  _move.value = false;
};

const hMove = (e) => {
  if (!_move.value) return;

  let sv = refBox.value.getClientRects()[0],
      pv = refBox.value.parentNode.getClientRects()[0];

  if (sv.left <= pv.left) _xy.x += Math.abs(x) * 2;
  if (sv.bottom >= pv.bottom) _xy.y -= Math.abs(y) * 2;
  if (sv.top <= pv.top) _xy.y += Math.abs(y) * 2;
  if (sv.right >= pv.right) _xy.x -= Math.abs(x) * 2;

  x = e.movementX;
  y = e.movementY;
  _xy.x += x;
  _xy.y += y;
};

const close = () => {
  isShow.value = false;
};

const initPosition = () => {
  _xy.x = 0;
  _xy.y = 0;
  stl.value = `transform:translate(-50%, -50%);`;
};

watch(_move, (m) => {
  if (m) {
    document.addEventListener("mousemove", hMove, false);
    document.addEventListener("mouseup", stopMove, false);
  } else {
    document.removeEventListener("mouseup", stopMove);
    document.removeEventListener("mousemove", hMove);
  }
});

watch(isShow, (s, osv) => {
  if (!osv && s) {
    initPosition();
  }
  if (!s) {
    _xy.x = 0;
    _xy.y = 0;
    document.removeEventListener("mouseup", stopMove);
    document.removeEventListener("mousemove", hMove);
  }
});

watch(_xy, (xy) => {
  if (xy.x === 0 && xy.y === 0) {
    stl.value = `transform:translate(-50%, -50%);`;
  } else {
    stl.value = `transform:translate(calc(-50% + ${_xy.x}px), calc(-50% + ${_xy.y}px));`;
  }
});

const hCallIn = {};

defineExpose({
  hCallIn: hCallIn,
  show: () => {
    isShow.value = true;
    nextTick(() => {
      initPosition();
    });
  },
  closeWait: () => {
    isWait.value = false;
  },
  hid: () => {
    isShow.value = false;
  }
});

onMounted(() => nextTick(() => {
  initPosition();
}));
</script>


<style module>
.wait {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.main {
  height: auto;
  min-height: 100px;
  background-image: url("/imgs/hf/newbg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 204, 0.3);
  overflow: hidden;
}

.head {
  text-align: center;
  margin-top: 11px;
  width: 100%;
  height: 30px;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  font-size: 18px;

  line-height: 19px;
  position: relative;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 35px;
  box-sizing: border-box;
}

.btn {
  background-image: url(/imgs/closeRed.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 27px;
  height: 27px;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  z-index: 30;
}

.body {
  width: 90%;
  height: auto;
  overflow: hidden;
  margin: 10px auto 0;
  position: relative;
  z-index: 20;
  box-sizing: border-box;
}

</style>